<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-02-27 09:43:48
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-02 16:51:35
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/InductionManagement/EntryApplicationSetting/AddSetting/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 新建/编辑入职申请设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" showBack> </pageHeaderNew>
    </template>
    <section>
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            基本信息
          </div>
        </div>
      </div>

      <div class="content">
        <a-form
          :model="formData.data"
          autoLabelWidth
          :rules="rules"
          :disabled="type === 2"
          ref="refForm"
        >
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                field="name"
                label="方案名称"
                label-col-flex="100px"
                showColon
              >
                <a-input v-model="formData.data.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="title"
                label="方案标题"
                label-col-flex="100px"
                showColon
              >
                <a-input v-model="formData.data.title" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                field="description"
                label="方案说明"
                label-col-flex="100px"
                showColon
              >
                <a-textarea
                  v-model="formData.data.description"
                  placeholder="请输入"
                  :maxLength="1000"
                  allowClear
                  show-word-limit
                  :autoSize="{
                    minRows: 3
                  }"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </section>
    <section>
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            配置字段
          </div>
        </div>
      </div>
      <div class="content">
        <a-table
          :data="controlData"
          @change="handleTableDrag"
          :draggable="{ type: 'handle', width: 40 }"
          :pagination="false"
        >
          <template #columns>
            <a-table-column
              title="字段名称"
              dataIndex="ctlCnName"
              :width="200"
            ></a-table-column>
            <a-table-column title="是否显示" dataIndex="isShow" :width="200">
              <template #cell="{ record }">
                <a-checkbox
                  v-model:modelValue="record.isShow"
                  :value="1"
                  :disabled="defaultCode.includes(record.ctlCode) || type === 2"
                ></a-checkbox>
              </template>
            </a-table-column>
            <a-table-column title="是否必填" dataIndex="isDefault" :width="200">
              <template #cell="{ record }">
                <a-checkbox
                  v-model:modelValue="record.isDefault"
                  :value="1"
                  :disabled="defaultCode.includes(record.ctlCode) || type === 2"
                ></a-checkbox>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </section>
    <footer>
      <a-space>
        <a-button @click="router.back()" class="btn">取消</a-button>
        <a-button
          type="outline"
          @click="preview"
          class="btn"
          v-show="type === 1"
          >预览</a-button
        >
        <a-button type="primary" @click="save" class="btn" v-show="type === 1"
          >保存</a-button
        >
      </a-space>
    </footer>
  </ContentCard>
  <Preview
    v-model:visible="previewVisible"
    :data="controlData.filter((el: any) => el.isShow )"
  />
</template>
<script setup lang="tsx">
import draggable from 'vuedraggable';
import { GetBusinessModalData } from '@/apis/controltotal';
import {
  GetEntryApplicationSettingDetail,
  PostEntryApplicationSetting,
  PutEntryApplicationSetting
} from '@/apis/management/human/humanChange/entry';
import Preview from './Components/Preview/index.vue';
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

const route = useRoute();
const router = useRouter();

const id = +route.query.id;
const type = +route.query.type;
const title = `${
  id && type === 2 ? '查看' : id && type === 1 ? '编辑' : '新增'
}入职申请设置`;

let refForm = ref();
const rules = {
  name: {
    required: true,
    message: '请输入方案名称'
  },
  title: {
    required: true,
    message: '请输入方案标题'
  }
};

let formData = reactive({
  data: {
    name: '', // 方案名称
    title: '', // 方案标题
    description: '', // 方案说明
    duration: -1 // 方案类型 新增默认传-1代表永久天数
  }
});

let controlData = ref([]);
// 默认必选的code
// 姓名、手机、证件类型、证件号码、公司、部门
let defaultCode = [
  'C62B8DC31189847E0972B5D8F721404B1',
  'C3384BE6E60C341D68B8180DA04A1C4E1',
  'C6413B1A7762943709D65A4DF52CD09FD',
  'C36FFB1152EBD42B7AD4EF65A6C334A6D',
  'CA8ABCC1480744557B3014C3454465A7E',
  'CED44AC9966904CD1AB546D309903727C'
];
const handleTableDrag = (_data) => {
  console.log(_data);
  controlData.value = _data;
};

const getData = async () => {
  try {
    // 编辑/查看
    if (id) {
      const res = await GetEntryApplicationSettingDetail({ id });

      formData.data = res;
      controlData.value = res.codes
        .map((el: any) => {
          return {
            ...el,
            isShow: el.isShow === 1 ? true : false,
            isDefault: el.isDefault === 1 ? true : false
          };
        })
        .sort((a, b) => {
          return a.sort - b.sort;
        });
    }
    // 新增情况下获取总集的数据
    else {
      const res = await GetBusinessModalData({
        funcCode: 'SER_FUNC751D0BFF5DF442209D437EE9A581693E'
      });
      // 展开数组，只储存控件数据
      controlData.value = res?.funcCtlInfos?.children
        ?.slice(0, 2)
        .map((el: any) => el.subDetail)
        .map((el: any) => el.subRelDetail)
        .flat()
        .map((el: any) => {
          return {
            ...el,
            isShow: defaultCode.includes(el.ctlCode) ? true : false,
            isDefault: defaultCode.includes(el.ctlCode) ? true : false
          };
        }); // 筛选前两个子集，人员的基本信息和任职信息
    }

    console.log('====================================');
    console.log(controlData.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

let previewVisible = ref(false); // 预览弹出框
// 预览
const preview = () => {
  previewVisible.value = true;
};

// 保存
const save = async () => {
  try {
    if (await refForm.value.validate()) {
      Message.error('请填写必填项');
      return;
    }
    controlData.value.forEach((el: any, ind: number) => {
      el.sort = ind + 1;
    });
    let codes = cloneDeep(controlData.value);
    codes = codes.map((el: any) => {
      el.isShow = el.isShow ? 1 : 2;
      el.isDefault = el.isDefault ? 1 : 2;
      return {
        ...el
      };
    });
    if (id) {
      await PutEntryApplicationSetting({
        ...formData.data,
        codes
      });
    } else {
      await PostEntryApplicationSetting({
        ...formData.data,
        createBy: +localStorage.getItem('userId'),
        codes
      });
    }
    router.back();
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>
<style lang="less" scoped>
.title-box {
  position: relative;
  margin-bottom: 20px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    border-radius: 4px;
    font-weight: 700;
    background: #e7efff;
  }
}

.title-box::before {
  position: absolute;
  // top: 33px;
  left: 10px;
  display: inline-block;
  height: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  margin-right: 20px;
  border-radius: 2px;
  // transform: translateY(-50%);
  content: '';
  background-color: #165dff;
}
.content {
  padding: 0 100px;
}

footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}

:deep(.arco-table-td) {
  height: 40px;
}

:deep(.arco-table-th) {
  height: 45px;
  font-weight: 700;
  background-color: #edeffd;
}

:deep(.arco-table-cell) {
  justify-content: center;
  text-align: center;
}
// 垂直滚动条统一往外
:deep(.arco-scrollbar-track-direction-vertical) {
  right: -15px;
}
// 水平滚动条统一往外
:deep(.arco-scrollbar-track-direction-horizontal) {
  bottom: -15px;
}
</style>
